<template>
  <layout>
    <template #moduleContent>
      <go-back @goBack="goBackHandle" />
      <assistantTree />
      <div class="dashboard-handoff right" v-if="!isUltraWide">
        <handoff v-for="item in AssistModule.right" :key="item.id" :list="item" type="right" :id="item.id" />
      </div>
      <big v-if="isUltraWide"></big>
      <mid v-else></mid>
      <legend-mark :legend="legendData.decisionMaking" />
      <ToggleMapMode class="ToggleMapMode-box" />
      <assistButton
        v-model:value="plottingVisible"
        @concentration-state="plottingVisible = true"
        @gate-closing-analysis="gateClosingAnalysis"
        @traffic-control="trafficControlHandle"
        @show-video-surveillance="showVideoSurveillanceHandle"
        @concentration-plotting="concentrationPlottingHandle"
        @area-plotting="areaPlottingHandle"
      />
      <assistant-video ref="assistantVideoRef" />
      <Plotting ref="concentrationRef" />
    </template>
  </layout>
</template>

<script setup lang="ts">
import layout from '@/gasLayout/index.vue';
import big from './big/index.vue';
import mid from './mid/index.vue';
import { useIsUltraWideScreen } from '@/hooks/useIsUltraWideScreen';
import ToggleMapMode from '@/components/ToggleMapMode/index.vue';
import legendMark from '@/components/legend/index.vue';
import legendData from '@/utils/legend/legendData';
import { AssistModule } from '@/constants/components/cards';
import { useLayoutStore } from '@/store/modules/layout';
import { getRightData } from '@/api/earlyWarning';
import { useCesiumPoints } from '@/hooks/useCesiumPoints';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import goBack from '@/components/goBack/index.vue';
import { useAssistStore } from '@/store/modules/Assist/useAssistStore';
import Plotting from './components/Plotting/index.vue';

const assistantVideoRef = ref(null);
const { gisList } = storeToRefs(useAssistStore());
const router = useRouter();
const { addPoint, clearAllPoints } = useCesiumPoints();
const layoutStore = useLayoutStore();
const { isUltraWide } = useIsUltraWideScreen();
const plottingVisible = ref<boolean>(false);
const dataSource = ref<any>({});
const concentrationRef = ref(null); //标会组件实例
// 返回监测预警和取消 浓度状态按钮
const goBackHandle = () => {
  if (plottingVisible.value) {
    plottingVisible.value = false;
    return;
  }
  router.push('/index');
};
//关阀情况回调
const gateClosingAnalysis = () => {
  if (dataSource.value['阀门']) {
    clearAllPoints(dataSource.value['阀门']);
    delete dataSource.value['阀门'];
    return;
  }
  if (!gisList.value.valves.length) {
    ElMessage.warning('暂无数据');
    return;
  }
  dataSource.value['阀门'] = gisList.value.valves.map((point) => addPoint(point.info, '阀门'));
};
//交通管制
const trafficControlHandle = () => {
  if (dataSource.value['交通管制']) {
    clearAllPoints(dataSource.value['交通管制']);
    delete dataSource.value['交通管制'];
    return;
  }
  if (!gisList.value.trans.length) {
    ElMessage.warning('暂无数据');
    return;
  }

  gisList.value.trans.forEach((point) => {
    point.longitude = point.coordinate.split(',')[0];
    point.latitude = point.coordinate.split(',')[1];
  });
  dataSource.value['交通管制'] = gisList.value.trans.map((point) => addPoint(point, '交通管制'));
};
//视频监控回调
const showVideoSurveillanceHandle = () => {
  assistantVideoRef.value.open();
};
//浓度标绘
const concentrationPlottingHandle = () => {
  concentrationRef.value.open('showDraw');
};
//区域标绘
const areaPlottingHandle = () => {
  concentrationRef.value.open('showArea');
};
onMounted(async () => {
  layoutStore.resetData();
  layoutStore.initModuleData(AssistModule.right[0], false, true);
  const { data } = await getRightData({ type: 'waringInfos' });
  data.waringInfos.map((point) => addPoint(point, COMPONENT_TITLES.INCIDENT_DISPOSITION));
});
</script>

<style lang="scss" scoped>
.dialog-container {
  position: absolute;
  top: 15%;
  left: 30%;
  z-index: 5;
}

.ToggleMapMode-box {
  position: absolute;
  right: 26.7%;
  bottom: 15%;
  z-index: 4;
}

.dashboard-handoff {
  z-index: 4;
  position: absolute;
  top: 1%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  &.right {
    right: 3%;
  }
}

@media (min-width: 3840px) {
  .ToggleMapMode-box {
    right: 25.9% !important;
  }
}
</style>
